<template>
<div class="car-list-container">
  <swiper style="height: 180px; margin-top:10px" loop auto :list="demo06_list" :index="demo06_index"></swiper>
  <group>
    <cell style="color:#999;margin-left:0px" title="订单评价" is-link>
      <div slot="value">
        <span style="color: #f36a62">233条评论</span>
      </div>
    </cell>
  </group>
  <divider>商品详情</divider>
  
  <div style="padding: 0 15px 0 15px;margin-bottom: 4.22rem;">
      <div slot="content"  class="card-padding">
        <p style="color:#999;font-size:14px;line-height:1.2;padding-bottom:10px">参与一次活动获得一辈子受用的东西</p>
      </div>
    <img  style="width: 100%;" src="https://o5omsejde.qnssl.com/demo/test1.jpg" />
    <div slot="content" class="card-padding">
      <p style="color:#999;font-size:14px;line-height:1.2;">参与一次活动获得一辈子受用的东西</p>
    </div>
  </div>
  <div class="car-foot-nav">
    <button class="sum-price car-btn">总额：￥2</button>
    <button onclick="window.history.go(-1)" class="continue-shopping car-btn" >继续购物</button>
    <button @click="showBase = true" class="to-pay car-btn" tag="button">立即购买</button>
  </div>

  <div class="sku-container" style="margin-bottom: 50px;">
      <van-sku style="margin-bottom: 50px;"
        v-model="showBase"
        :sku="sku"
        :goods="goods"
        :goods-id="goodsId"
        :hide-stock="sku.hide_stock"
        :reset-stepper-on-hide="resetStepperOnHide"
        :disable-stepper-input="disableStepperInput"
        @buy-clicked="handleBuyClicked"
        @add-cart="handleAddCartClicked">
      </van-sku>
  </div>
</div>
</template>

<script>

const baseList = [{
  url: 'javascript:',
  img: 'http://36588.com.cn/website/upload/goods/2014/8/7/0f63db3c-228f-4368-ac3b-71e319bcd3b9.jpeg',
  title: '送你一朵fua'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/2.jpg',
  title: '送你一辆车'
}, {
  url: 'javascript:',
  img: 'https://static.vux.li/demo/3.jpg',
  title: '送你一次旅行'
}]

const urlList = baseList.map((item, index) => ({
  url: 'aboutUs',
  img: item.img,
  title: `${item.title}`
}))

import { Swiper, Divider, Group, Cell } from 'vux'
import { Card, Button, Sku } from 'vant'
import 'vant/lib/vant-css/index.css'
import Vue from 'vue'
Vue.component(Sku.name, Sku)
Vue.component(Card.name, Card)
Vue.component(Button.name, Button)
import { getAuthInfo } from '../utils/common'

export default {
  components: {
    Swiper,
    Divider,
    Group,
    Cell
  },
  data () {
    return {
      post: null,
      demo06_index: 0,
      demo06_list: urlList,
      sku: {
        'tree': [{
          'k': '颜色',
          'v': [{
            'id': '30349',
            'name': '红色',
            'imgUrl': 'https://static.vux.li/demo/3.jpg'
          }, {
            'id': '1215',
            'name': '蓝色',
            'imgUrl': 'https://static.vux.li/demo/3.jpg'
          }],
          'k_s': 's1'
        }],
        'list': [{
          'id': 2259,
          'price': 100,
          's1': '1215',
          's2': '1193',
          's3': '0',
          'stock_num': 110
        }],
        'price': '1.00',
        'stock_num': 227,
        'collection_id': 2261,
        'none_sku': false,
        'messages': [{
          'datetime': '0',
          'multiple': '0',
          'name': '留言',
          'type': 'text',
          'required': '1'
        }],
        'hide_stock': false
      },
      goods: {
        'title': '测试商品',
        'picture': 'https://static.vux.li/demo/3.jpg'
      },
      goodsId: '946755',
      messages: {
        message_0: '12',
        message_1: ''
      },
      cartMessages: {
        '留言1': 'xxxx'
      },
      selectedNum: 1,
      selectedSkuComb: {
        id: 2257,
        price: 100,
        s1: '30349',
        s2: '1193',
        s3: '0',
        stock_num: 111
      },
      showBase: false,
      resetStepperOnHide: false,
      disableStepperInput: false
    }
  },
  beforeRouteEnter (to, from, next) {
    console.log(to)
    console.log(from)
    next(vm => {
      vm.post = 'post'
    })
  },
  created: function () {
    getAuthInfo('home')
  },
  watch: {
    $route () {
      console.log(this.$route.query.id)
    }
  },
  methods: {
    handleBuyClicked: function () {
      this.$router.push('/payform')
    },
    handleAddCartClicked: function () {
      this.showBase = false
    }
  }
}
</script>

<style scoped>

.car-foot-nav{
    position: fixed;
    bottom:0;
    width: 100%;
    border-top: 0.0156rem;
}
.car-btn{
  flex:1;
  height: 3.22rem;
  border: none;
  flex:none;
  color:#77b59c;
  float: left;
}
.sum-price{
  width: 38%;
  background-color:#fff;
}
.continue-shopping{
  background: #f36a62;
  color: #fff !important;
  height: 3.22rem;
  width: 24%;
  margin:0;
}

.to-pay{
  background: rgb(16, 197, 182);
  color: #fff;
  width: 38%;
}

</style>
